<template>
    <div id="background">
        <el-container style="height:100%;" direction="vertical">
            <el-header id="forgetHead" >
                <el-row>
                    <el-col :span="1/2"> <img src="../../assets/icon/logo.png" style="margin: 10px auto;"></el-col>
					<el-col :span="4"> <span style="font-size: 25px;color: #FFFFFF;margin-left: 20px;line-height: 60px;white-space: nowrap;"><b>新职通企业端</b></span></el-col>
                    <el-col :span="1/2" :offset="16" class="pointer"><i class="el-icon-s-home" style="margin: 10px;font-size: 36px;color: #FFFFFF;" @click="goback" ></i></el-col>
                    <el-col :span="2"><span  style="font-size: 24px;color: #FFFFFF;line-height: 60px;white-space: nowrap;" @click="goback" class="pointer"><b>返回首页</b></span></el-col>
                </el-row>
            </el-header>
            <el-main id="forgetMain">
                <div style=" position: relative;">
                <div class="forgetBox">
                    <div class="stepBar">
                        <el-steps :active="active" align-center>
                            <el-step title="重新设置密码" ></el-step>
                            <el-step title="前往邮箱确认" ></el-step>    
                        </el-steps>
                    </div>
                    <div v-if="active==1">
                        <div style="margin-top:30px;">
                            <el-form ref="form" :model="forgetForm" :label-position="labelPosition" label-width="180px">
                                <el-form-item label="邮箱">
                                    <el-col :span="14">
                                        <el-input v-model="forgetForm.email" placeholder="您注册时填写的邮箱" class="xinXi"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="验证码">
                                    <el-col :span="5">
                                        <el-input v-model="forgetForm.yanZhengMa" placeholder="验证码" class="yanZheng"></el-input>
                                    </el-col>
                                    <el-col :span="17" :offset="2">
                                        <canvas id="CAPTCHA" v-on:click="capOn" style="height: 38px;vertical-align:middle;width: 76px;"></canvas>
                                        <span v-on:click="capOn" style="color: #999999;width: 50px;font-size: 10px;" class="pointer">
                                            <span>换一张</span>
                                                <i class="iconfont icon-huanfang" style="font-size: 10px;line-height: 40px;"></i>
                                        </span>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="新密码">
                                    <el-col :span="14">
                                        <el-input v-model="forgetForm.password" placeholder="请设置新密码" class="xinXi" show-password></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="确认密码">
                                    <el-col :span="14">
                                        <el-input v-model="forgetForm.password2" placeholder="请确认新密码" class="xinXi" show-password></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div style="margin-top:70px;">
                            <span class="juZhong">
                                <el-button type="primary" @click="goToStep2">发送</el-button>
                            </span>
                        </div>
                    </div>
                    <div v-else>
                        <div style="margin-top:30px;" >
                            <el-row style="position:relative;">
                            <el-col :span="2" :offset="3" style="margin-top:14px;">
                                <i  class="el-icon-message" style="font-size:40px;color:#409EFF;"></i>
                            </el-col>
                            <el-col :span="18" style="height:100%;">
                                <el-row><span>感谢注册，邮件已发送至您的注册邮箱：</span></el-row>
                                    <el-row><span>{{forgetForm.email}}</span></el-row>
                                    <el-row><span style="color:#909090">请进入邮箱查看邮件，并在邮箱内确认修改密码，不确认则密码不更改</span></el-row>
                            </el-col>
                            </el-row>
                            <el-row style="margin-top:30px;">
                                <el-col :span="20" :offset="3">
                                    <span>没有收到邮件？</span>
                                </el-col>
                                <el-col :span="20" :offset="3">
                                    <el-row style="margin-top:5px;">
                                        <el-col :span="18"><span>1.请检查邮箱地址是否填写正确，您可以返回</span></el-col>
                                        <el-col :span="4"><span style="color:#409EFF;" @click="goToStep1" class="pointer">重新填写</span></el-col>
                                    </el-row>
                                    <el-row style="margin-top:5px;">
                                        <el-col :span="18"><span>2.请检查您的邮件垃圾箱</span></el-col>
                                    </el-row>
                                    <el-row style="margin-top:5px;">
                                        <el-col :span="18"><span>3.您也可以重新尝试</span></el-col>
                                        <el-col :span="4"><span style="color:#409EFF;" @click="yanZheng" class="pointer">重新发送</span></el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="margin-top:70px;">
                            <span class="juZhong">
                                <el-button type="primary" @click="queRen">我已确认</el-button>
                            </span>
                        </div>
                    </div>
                </div>
                </div>
            </el-main>
            <el-footer>
                <span style="float:right;color:#707070;margin-right:30px;">联系我们</span>
            </el-footer>
        </el-container>
    </div>    
</template>

<script>
var yanzhengma = ""
export default {
    data(){
        return{
            labelPosition: 'right',
            active:1,
            forgetForm: {
                email:'',
                password:'',
                password2:'',
                yanZhengMa:'',
        },
            normalHeight:document.documentElement.clientHeight,
        }
    },
    mounted(){
        var bg = document.getElementById("background");
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("forgetHead");
        var headHeight=this.normalHeight/30 *3 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("forgetMain");
        var mainHeight=this.normalHeight/30 *24 ;
        main.style.height=mainHeight+"px";

        yanzhengma = this.drawPic();
		console.log(yanzhengma);
    },
    methods:{
        goback(){
            window.location.href = 'http://www.hangzhourunshi.cn/#/'; 
        },
        queRen(){
            var data={
                username:this.forgetForm.email,
                password:this.forgetForm.password,
            }
            var URL='http://47.101.180.43:8075/user/login'
                        this.$ajax({
                        method:'post',
                        url:URL,
                        data:data,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                            this.$router.push({
                                path:'/',
                            })
                        }else{
                            console.log(response.data.msg); 
                            this.$notify.error({
                                message:'请先去邮箱激活'
                            });
                        }
            
                    }).catch(error => {
                    console.log('密码找回失败');
                    });
        },
       yanZheng(){
            var params='';
            params={
                emailType:'RESETPASSWORD',
                targetType:'COMPANY',
            }
            var data={
                username:this.forgetForm.email,
                password:this.forgetForm.password,
            }
            var URL='http://47.101.180.43:8075/user/email'
                        this.$ajax({
                        method:'post',
                        url:URL,
                        data:data,
                        params: params
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                        }else{
                            console.log(response.data.msg); 
                            this.$notify.error({
                                message:response.data.msg
                            });
                        }
            
                    }).catch(error => {
                    console.log('邮箱验证失败');
                    });
        },
        goToStep1(){
            this.active=1;
         },
        goToStep2(){
            if(this.forgetForm.email!=''&&this.forgetForm.password!=''){
            if(this.forgetForm.password==this.forgetForm.password2){
                console.log('这里是验证码'+yanzhengma);
                console.log('这里是验证码2'+this.forgetForm.yanZhengMa);
                var params='';
                params={
                    emailType:'RESETPASSWORD',
                    targetType:'COMPANY',
                }
                var data={
                        username:this.forgetForm.email,
                        password:this.forgetForm.password,
                }
                if(this.forgetForm.yanZhengMa==yanzhengma){
                        var URL='http://47.101.180.43:8075/user/email'
                        this.$ajax({
                        method:'post',
                        url:URL,
                        data:data,
                        params: params
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                            this.active=2;
                        }else{
                            console.log(response.data.msg); 
                            this.$notify.error({
                                message:response.data.msg
                            });
                        }
            
                    }).catch(error => {
                    console.log('邮箱验证失败');
                    });
                }else{
                    const h = this.$createElement;

                    this.$notify({
                    message: h('i', { style: 'color: teal'}, '验证码错误')
                    });
                }
            }else{
                const h = this.$createElement;

                this.$notify({
                message: h('i', { style: 'color: teal'}, '密码不一致')
                });
            }
            }else{
                const h = this.$createElement;

                this.$notify({
                message: h('i', { style: 'color: teal'}, '请填写邮箱和密码')
                });
            }
        },
        randomNum: function(min,max){
					return Math.floor(Math.random()*(max-min)+min);
				},
				randomColor: function(min,max){
					var _r = this.randomNum(min,max);
					var _g = this.randomNum(min,max);
					var _b = this.randomNum(min,max);
					return "rgb("+_r+","+_g+","+_b+")";
				},
				drawPic: function(){
					var $canvas = document.getElementById("CAPTCHA");
					var _str = "0123456789";//设置随机数库
					var _picTxt = "";//随机数
					var _num = 4;//4个随机数字
					var _width = $canvas.width;
					var _height = $canvas.height;
					var ctx = $canvas.getContext("2d");//获取 context 对象
					ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
					ctx.fillStyle = "#8998dc"//填充画布颜色
					ctx.fillRect(0,0,_width,_height);//填充矩形--画画
					for(var i=0; i<_num; i++){
						var x = (_width-10)/_num*i+10;
						var y = this.randomNum(_height/2,_height);
						var deg = this.randomNum(-45,45);
						var txt = _str[this.randomNum(0,_str.length)];
						_picTxt += txt;//获取一个随机数
						ctx.fillStyle = this.randomColor(10,100);//填充随机颜色
						ctx.font = this.randomNum(40,90)+"px SimHei";//设置随机数大小，字体为SimHei
						ctx.translate(x,y);//将当前xy坐标作为原始坐标
						ctx.rotate(deg*Math.PI/180);//旋转随机角度
						ctx.fillText(txt, 0,0);//绘制填色的文本
						ctx.rotate(-deg*Math.PI/180);
						ctx.translate(-x,-y);
					}
					for(var i=0; i<_num; i++){
						//定义笔触颜色
						ctx.strokeStyle = this.randomColor(90,180);
						ctx.beginPath();
						//随机划线--4条路径
						ctx.moveTo(this.randomNum(0,_width), this.randomNum(0,_height));
						ctx.lineTo(this.randomNum(0,_width), this.randomNum(0,_height));
						ctx.stroke();
					}
					for(var i=0; i<_num*10; i++){
						ctx.fillStyle = this.randomColor(0,255);
						ctx.beginPath();
						//随机画原，填充颜色
						ctx.arc(this.randomNum(0,_width),this.randomNum(0,_height), 1, 0, 2*Math.PI);
						ctx.fill();
					}
					return _picTxt;//返回随机数字符串
				},
				capOn(e){
					e.preventDefault();
					yanzhengma = this.drawPic();
					console.log(yanzhengma);
				}
    }
}
</script>

<style>
.pointer{
		cursor: pointer;
}
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
.forgetBox{
    top: 50%;
    left: 50%;
    margin-left: -300px;
    width:600px;
    height:480px;
    /* background-color: #4A4C5B; */
    position: absolute;

}
#forgetMain{
   
     background-color: #ffffff;
    /* height:580px; */
}
#forgetHead{
     background-color: #4A4C5B;
}
#background{
    background-color: #ffffff;
    height:100%;
}
</style>